<template>
  <div>
    <BaseTable
      :table-data="tableData"
      :table-list="tableList"
      show-index
      :show-pagination="false"
    />
  </div>
</template>
<script>
import { getByPlanOrderNoQuery } from '@/service/remittance'
import BaseTable from '@/components/BaseTable'
import { getStatusText, formatTime, toFixedHandle } from '@/utils/tools'

export default {
  name: 'DetailAgreeInfo',
  components: {
    BaseTable
  },
  props: {
    basePlanOrderInfo: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      tableData: [],
      tableList: [
        {
          label: '回款编号',
          prop: 'paymentPlanOrderNo',
          width: 150
        },
        {
          label: '回款单现金金额',
          prop: 'paymentAmount',
          width: 150,
          render: (node, data) => {
            const { row, column: { prop }} = data
            return <span>{`${row.currencyCode} ${toFixedHandle(row[prop])}`}</span>
          }
        },
        {
          label: '币种',
          prop: 'currencyCode',
          width: 150,
          render: (node, data) => {
            const { row, column: { prop }} = data
            const text = getStatusText(row[prop], this.currency_options)
            return <span>{{ text }}</span>
          }
        },
        {
          label: '回款流水号',
          prop: 'transactionFlowNo',
          width: 150
        },
        {
          label: '最终主体',
          prop: 'finalPayeeName',
          width: 150
        },
        {
          label: '最终币种',
          prop: 'finalCurrency',
          width: 150,
          render: (node, data) => {
            const { row, column: { prop }} = data
            const text = getStatusText(row[prop], this.currency_options)
            return <span>{{ text }}</span>
          }
        },
        {
          label: '流水最终金额',
          prop: 'bankSlipAmount',
          width: 150,
          render: (node, data) => {
            const { row, column: { prop }} = data
            return <span>{`${row.finalCurrency} ${toFixedHandle(row[prop])}`}</span>
          }
        },
        {
          label: '本次核销金额',
          prop: 'writeOffAmount',
          width: 150,
          render: (node, data) => {
            const { row, column: { prop }} = data
            return <span>{`${row.finalCurrency} ${toFixedHandle(row[prop])}`}</span>
          }
        },
        {
          label: '核销时间',
          prop: 'updateTime',
          width: 150,
          render: (node, data) => {
            const { row, column: { prop }} = data
            return <span>{ formatTime(row[prop]) }</span>
          }
        },
        {
          label: '核销申请人',
          prop: 'writeOffInitiatorName',
          width: 150,
          render: (node, data) => {
            const { row, column: { prop }} = data
            return <span>{ row[prop] === '-1' ? '未找到邮箱' : row[prop] }</span>
          }
        },
        {
          label: '状态',
          prop: 'status',
          width: 150,
          render: (node, data) => {
            const { row, column: { prop }} = data
            const text = getStatusText(row[prop], this.write_status_options)
            return <span>{{ text }}</span>
          }
        }
      ],
      checkingStatusOptions: [],
      currency_options: [],
      write_status_options: []
    }
  },
  computed: {
    allOptions() {
      return this.$store.getters.allOptions
    }
  },
  mounted() {
    this.getByPlanOrderNoQueryHandle()
    this.queryAllOptionsHandle()
  },
  methods: {
    getStatusText,
    formatTime,
    toFixedHandle,
    async getByPlanOrderNoQueryHandle() {
      const res = await getByPlanOrderNoQuery({ planOrderNo: this.basePlanOrderInfo?.paymentPlanOrderNo })
      this.tableData = res || []
    },
    // 请求option放vuex
    async queryAllOptionsHandle() {
      // 核销状态：write_status
      this.write_status_options = await this.$store.dispatch('base/getBaseDataList', {
        type: 'write_status'
      })
      // 币种： currency
      this.currency_options = await this.$store.dispatch('base/getBaseDataList', {
        type: 'currency'
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
